<template>
  <div class="radiolist">
    <!-- 列表部分 -->
    <div class="radio-wrap">
      <div class="program-list-box f-cb">
        <div class="program-list  f-l">
          <div class="u-title f-cb">
            <h3>
              <a
                href="javascript:;"
                @click="goRoute('/find/newsradio/program/', 'list')"
                class="f-ff2"
                >推荐节目</a
              >
            </h3>
            <a
              href="javascript:;"
              @click="goRoute('/find/newsradio/program/', 'list')"
              class="more s-fc3"
              >更多 &gt;</a
            >
          </div>
          <ul class="pro-list">
            <li class="itm" v-for="program in programsLeft" :key="program.id">
              <a class="cvr f-l" title="播放">
                <img :src="program.coverUrl" alt="" />
                <i class="ply"></i>
              </a>
              <div class="cnt f-l">
                <h3 class="f-thide">
                  <a
                    href="javascript:;"
                    @click="goRoute('/find/program/', program.id)"
                    class="s-fc1"
                    :title="program.name"
                    >{{ program.name }}</a
                  >
                </h3>
                <p class="f-thide">
                  <a
                    href="javascript:;"
                    @click="goRoute('/find/djradio/',program.radio.id)"
                    class="s-fc1"
                    :title="program.dj.brand"
                    >{{ program.dj.brand }}</a
                  >
                </p>
              </div>
              <a
                href="javascript:void(0);"
                @click="
                  goRoute(
                    '/find/newsradio/radiotype/',
                    program.radio.categoryId
                  )
                "
                class="tag"
                >{{ program.radio.category }}</a
              >
            </li>
          </ul>
        </div>
        <div class="program-list f-r">
          <div class="u-title f-cb">
            <h3>
              <a
                href="javascript:;"
                @click="goRoute('/find/newsradio/program/', 'rank')"
                class="f-ff2"
                >节目排行榜</a
              >
            </h3>
            <a
              href="javascript:;"
              @click="goRoute('/find/newsradio/program/', 'rank')"
              class="more s-fc3"
              >更多 &gt;</a
            >
          </div>
          <ul class="pro-list">
            <li
              class="itm"
              v-for="(item, index) in topList"
              :key="item.program.id"
            >
              <div class="rank f-l">
                <em :class="{ red: index < 3 }">
                  {{ index > 9 ? `0${index + 1}` : index + 1 }}</em
                >
                <span
                  :class="[
                    'u-rnk',
                    index + 1 - item.lastRank < 0 ? 'u-rnk-up' : '',
                    index + 1 - item.lastRank > 0 ? 'u-rnk-dn' : '',
                  ]"
                  ><i
                    :class="['u-icn', item.lastRank < 0 ? 'u-icn-new' : '']"
                  ></i
                  >{{
                    item.lastRank > 0 ? Math.abs(item.lastRank - index - 1) : ""
                  }}</span
                >
              </div>
              <a class="cvr u-cover f-l" title="播放">
                <img :src="item.program.coverUrl" alt="" />
                <i
                  class="ply f-pa f-dn f-alpha"
                ></i>
              </a>
              <div class="cnt cnt-rank f-l">
                <h3 class="f-thide">
                  <a
                    href="javascript:;"
                    @click="goRoute('/find/program/', item.program.id)"
                    class="s-fc1 f-fw0"
                    :title="item.program.mainSong.name"
                    >{{ item.program.mainSong.name }}</a
                  >
                </h3>
                <p class="f-thide">
                  <a
                    href="javascript:;"
                    @click="goRoute('/find/djradio/',item.program.radio.id)"
                    class="s-fc1"
                    :title="item.program.radio.name"
                    >{{ item.program.radio.name }}</a
                  >
                </p>
              </div>
              <span class="hot f-l"
                ><i :style="{ width: item.width }"><i></i></i
              ></span>
            </li>
          </ul>
        </div>
      </div>

      <!-- 电台列表 -->
      <div class="rdimore" v-for="item in cateList" :key="item.id">
        <div class="u-title f-cb">
          <h3>
            <span class="f-ff2"
              ><a
                href="javascript:;"
                @click="goRoute('/find/newsradio/radiotype/', item.id)"
                >{{ item.name }}</a
              ><span class="f-ff1">·</span>电台</span
            >
          </h3>
          <a
            href="javascript:;"
            @click="goRoute('/find/newsradio/radiotype/', item.id)"
            class="more s-fc3"
            >更多 &gt;</a
          >
        </div>
        <ul class="rdilist f-cb">
          <li v-for="itemson in item.list" :key="itemson.id">
            <a href="javascript:;" @click="goRoute('/find/djradio/',itemson.id)" class="cvr u-cover u-cover-rdi f-l">
              <img :src="itemson.picUrl" alt="" />
            </a>
            <div class="cnt">
              <h3 class="f-fs3">
                <a
                  href="javascript:;" @click="goRoute('/find/djradio/',itemson.id)"
                  class="s-fc1"
                  :title="itemson.name"
                  >{{ itemson.name }}</a
                >
              </h3>
              <p class="note s-fc4">{{ itemson.rcmdtext }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
// import mixin from "@/components/Mixin/mixin";
export default {
  data: () => ({
    programsLeft: [],
    topList: [],
    cateList: [
      {
        id: 2,
        name: "音乐故事",
        list: [],
      },
      {
        id: 6,
        name: "美文读物",
        list: [],
      },
      {
        id: 5,
        name: "脱口秀",
        list: [],
      },
      {
        id: 3,
        name: "情感调频",
        list: [],
      },
      {
        id: 2001,
        name: "创作|翻唱",
        list: [],
      },
      {
        id: 11,
        name: "人文历史",
        list: [],
      },
    ],
  }),
  // mixins: [mixin],
  created() {
    this.getProgrammRrecommend();
    this.getProgrammRank();
    this.cateList.forEach((item, index) => {
      this.getRadioListByType(item.id, index);
    });
  },
  methods: {
    async getProgrammRrecommend() {
      const {
        data: { programs },
      } = await this.Api.wjwApi.getProgrammRrecommend();
      this.programsLeft = programs;
      // console.log(programs);
    },
    async getProgrammRank() {
      const {
        data: { toplist },
      } = await this.Api.wjwApi.getProgrammRank();
      const base = parseFloat(toplist[0].score / 0.92);
      toplist.forEach((item) => {
        item.width = (item.score / base) * 100 + "%";
      });
      this.topList = toplist;
      console.log(toplist);
    },

    async getRadioListByType(item, index) {
      const {
        data: { djRadios },
      } = await this.Api.wjwApi.getRadioListByType(item);
      this.cateList[index].list = djRadios.slice(0, 4);
      // console.log(this.cateList[index].list);
    },

    // goRadioType(id) {
    //   this.$router.push(`/find/newsradio/radiotype/${id}`);
    // },
  },
};
</script>
<style lang="less" scoped>
.radiolist {
  .radio-wrap {
    padding: 0 40px;
    .program-list-box {
      .program-list {
        width: 426px;
        .pro-list {
          height: 600px;
          border: 1px solid #e2e2e2;
          border-top: none;
          .itm {
            width: 424px;
            height: 40px;
            padding: 10px 0;
            line-height: 40px;
            float: left;
            background: #fff;
            .rank {
              width: 47px;
              margin: 6px 0 0 0;
              text-align: center;
              line-height: normal;
              color: #999;
              em {
                display: block;
                width: 100%;
                text-align: center;
                font-size: 14px;
                font-family: Arial, Helvetica, sans-serif;
              }
              .red {
                color: #da4545;
              }
              .u-rnk {
                line-height: normal;
                font-size: 10px;
                font-family: Arial, Helvetica, sans-serif;
                .u-icn {
                  background: url("../../../../../assets/wjwimgs/icon.png")
                    no-repeat 0 9999px;
                  margin: -1px 2px 0 0;
                  width: 6px;
                  height: 6px;
                  background-position: -74px -274px;
                  display: inline-block;
                  overflow: hidden;
                }
                .u-icn-new {
                  width: 16px;
                  height: 17px;
                  background-position: -67px -283px;
                }
              }
              .u-rnk-up {
                color: #ba2226;
                .u-icn {
                  background-position: -74px -304px;
                }
                .u-icn-new {
                  width: 16px;
                  height: 17px;
                  background-position: -67px -283px;
                }
              }
              .u-rnk-dn {
                color: #4abbeb;
                .u-icn {
                  background-position: -74px -324px;
                }
                .u-icn-new {
                  width: 16px;
                  height: 17px;
                  background-position: -67px -283px;
                }
              }
            }
            .cvr {
              position: relative;
              display: block;
              width: 40px;
              height: 40px;
              margin-left: 20px;
              img {
                display: block;
                width: 100%;
                height: 100%;
              }
              .ply {
                position: absolute;
                display: none;
                width: 22px;
                height: 22px;
                top: 50%;
                left: 50%;
                overflow: hidden;
                margin: -11px 0 0 -11px;
                background-image: url("../../../../../assets/wjwimgs/icn_ply.png");
                background-position: 0 -85px;
              }
            }
            .cvr.u-cover {
              margin-left: 0;
            }
            .cnt {
              width: 254px;
              margin: 1px 0 0 10px;
              line-height: 20px;
              .f-thide {
                width: 100%;
                font-size: 12px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-wrap: normal;
                .s-fc1 {
                  color: #333;
                  padding: 0;
                  margin: 0;
                  display: inline-block;
                  height: 20px;
                  font-weight: normal;
                  width: 100%;
                }
              }
              .f-thide {
                a:hover {
                  text-decoration: underline;
                }
              }
              p.f-thide .s-fc1 {
                color: #999;
              }
            }
            .cnt-rank {
              width: 208px;
            }
            .tag {
              margin: 1px 0 0 10px;
              display: inline-block;
              position: relative;
              top: -1px;
              height: 16px;
              overflow: hidden;
              padding: 0 6px;
              border: 1px solid #999;
              line-height: 16px;
              *line-height: 18px;
              color: #999;
              vertical-align: middle;
              font-size: 12px;
            }
            .tag:hover {
              color: #666;
            }
            .hot {
              margin-top: 16px;
              display: block;
              height: 8px;
              position: relative;
              width: 100px;
              background: url("../../../../../assets/wjwimgs/table.png")
                no-repeat 0 9999px;
              background-position: 0 -240px;
              line-height: normal;
              i {
                background: url("../../../../../assets/wjwimgs/table.png")
                  no-repeat 0 9999px;
                overflow: hidden;
                padding: 0 4px;
                background-position: right -318px;
                display: block;
                height: 8px;
                i {
                  margin-left: -4px;
                  padding: 0 0 0 4px;
                  background-position: 0 -304px;
                }
              }
            }
          }
          .itm:nth-child(2n) {
            background: #f7f7f7;
          }
          .itm:hover {
            background-color: #f1f1f1;
            .ply {
              display: block;
            }
          }
        }
      }
    }
    .u-title {
      height: 40px;
      border-bottom: 2px solid #c20c0c;

      a {
        font-size: 12px;
        color: #666;
      }
      h3 {
        float: left;
        font-weight: normal;
        padding-top: 4px;
        a {
          color: #333;
          font-size: 24px;
        }
      }
      a:hover {
        text-decoration: underline;
      }
      .more {
        float: right;
        margin-top: 14px;
      }
    }
    .rdimore {
      margin-top: 35px;
      .u-title h3 {
        float: left;
        font-size: 24px;
        font-weight: normal;
        .f-ff2 {
          font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
          .f-ff1 {
            font-family: simsun, \5b8b\4f53;
          }
        }
      }
      .rdilist {
        margin-left: -30px;
        li {
          float: left;
          width: 435px;
          height: 120px;
          margin-left: 30px;
          _margin-left: 15px;
          padding: 20px 0;
          border-bottom: 1px solid #e7e7e7;
          .cvr {
            margin-right: -200px;
          }
          .u-cover-rdi {
            width: 120px;
            height: 120px;
          }
          .u-cover {
            position: relative;
            display: block;
            img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }
          .cnt {
            margin-left: 140px;
            h3 {
              margin: 16px 0 20px;
              .s-fc1 {
                color: #333;
              }
            }
            h3:hover {
              text-decoration: underline;
            }
            .f-fs3 {
              font-size: 18px;
            }
            .note {
              margin-bottom: 6px;
              line-height: 20px;
              font-size: 12px;
            }
            .s-fc4,
            a.s-fc4:hover {
              color: #999;
            }
          }
        }
        li:nth-child(3),
        li:nth-child(4) {
          border-bottom-color: #fff;
        }
      }
    }
  }
}
.f-cb:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
a {
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
}
em {
  font-style: normal;
}
li {
  list-style: none;
}
.f-l {
  float: left;
}
.f-r {
  float: right;
}
.u-title {
  height: 40px;
  border-bottom: 2px solid #c20c0c;
  a {
    font-size: 12px;
    color: #666;
  }
  h3 {
    float: left;
    font-weight: normal;
    padding-top: 4px;
    a {
      color: #333;
      font-size: 24px;
    }
  }
  a:hover {
    text-decoration: underline;
  }
  .more {
    float: right;
    margin-top: 14px;
  }
}
</style>
